﻿@page "/navs"

<h1>Navs</h1>

<div class="docs-example">
    <p>As a list:</p>
    <BSNav IsList="true">
        <BSNavItem>
            <BSNavLink IsActive="true" href="#">Active</BSNavLink>
        </BSNavItem>
        <BSNavItem>
            <BSNavLink href="#">Link</BSNavLink>
        </BSNavItem>
        <BSNavItem>
            <BSNavLink href="#">Another Link</BSNavLink>
        </BSNavItem>
        <BSNavItem>
            <BSNavLink IsDisabled="true" href="#">Disabled</BSNavLink>
        </BSNavItem>
    </BSNav>
    <p>As non list:</p>
    <BSNav>
        <BSNavLink IsActive="true" href="#">Active</BSNavLink>
        <BSNavLink href="#">Link</BSNavLink>
        <BSNavLink href="#">Another Link</BSNavLink>
        <BSNavLink IsDisabled="true" href="#">Disabled</BSNavLink>
    </BSNav>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/navs/navs1.html" />

<h3>Horizontal Alignment</h3>

<div class="docs-example">
    <BSNav IsList="true" Alignment="Alignment.Center">
        <BSNavItem>
            <BSNavLink IsActive="true" href="#">Active</BSNavLink>
        </BSNavItem>
        <BSNavItem>
            <BSNavLink href="#">Link</BSNavLink>
        </BSNavItem>
        <BSNavItem>
            <BSNavLink href="#">Another Link</BSNavLink>
        </BSNavItem>
        <BSNavItem>
            <BSNavLink IsDisabled="true" href="#">Disabled</BSNavLink>
        </BSNavItem>
    </BSNav>
    <BSNav IsList="true" Alignment="Alignment.Right">
        <BSNavItem>
            <BSNavLink IsActive="true" href="#">Active</BSNavLink>
        </BSNavItem>
        <BSNavItem>
            <BSNavLink href="#">Link</BSNavLink>
        </BSNavItem>
        <BSNavItem>
            <BSNavLink href="#">Another Link</BSNavLink>
        </BSNavItem>
        <BSNavItem>
            <BSNavLink IsDisabled="true" href="#">Disabled</BSNavLink>
        </BSNavItem>
    </BSNav>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/navs/navs2.html" />

<h3>Vertical</h3>

<div class="docs-example">
    <p>As a list:</p>
    <BSNav IsList="true" IsVertical="true">
        <BSNavItem>
            <BSNavLink IsActive="true" href="#">Active</BSNavLink>
        </BSNavItem>
        <BSNavItem>
            <BSNavLink href="#">Link</BSNavLink>
        </BSNavItem>
        <BSNavItem>
            <BSNavLink href="#">Another Link</BSNavLink>
        </BSNavItem>
        <BSNavItem>
            <BSNavLink IsDisabled="true" href="#">Disabled</BSNavLink>
        </BSNavItem>
    </BSNav>
    <p>As non list:</p>
    <BSNav IsVertical="true">
        <BSNavItem>
            <BSNavLink IsActive="true" href="#">Active</BSNavLink>
        </BSNavItem>
        <BSNavItem>
            <BSNavLink href="#">Link</BSNavLink>
        </BSNavItem>
        <BSNavItem>
            <BSNavLink href="#">Another Link</BSNavLink>
        </BSNavItem>
        <BSNavItem>
            <BSNavLink IsDisabled="true" href="#">Disabled</BSNavLink>
        </BSNavItem>
    </BSNav>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/navs/navs3.html" />

<h3>Tabs</h3>

<div class="docs-example">
    <BSNav IsList="true" IsTabs="true">
        <BSNavItem>
            <BSNavLink IsActive="true" href="#">Active</BSNavLink>
        </BSNavItem>
        <BSNavItem>
            <BSNavLink href="#">Link</BSNavLink>
        </BSNavItem>
        <BSNavItem>
            <BSNavLink href="#">Another Link</BSNavLink>
        </BSNavItem>
        <BSNavItem>
            <BSNavLink IsDisabled="true" href="#">Disabled</BSNavLink>
        </BSNavItem>
    </BSNav>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/navs/navs4.html" />

<h3>Pills</h3>

<div class="docs-example">
    <BSNav IsList="true" IsPills="true">
        <BSNavItem>
            <BSNavLink IsActive="true" href="#">Active</BSNavLink>
        </BSNavItem>
        <BSNavItem>
            <BSNavLink href="#">Link</BSNavLink>
        </BSNavItem>
        <BSNavItem>
            <BSNavLink href="#">Another Link</BSNavLink>
        </BSNavItem>
        <BSNavItem>
            <BSNavLink IsDisabled="true" href="#">Disabled</BSNavLink>
        </BSNavItem>
    </BSNav>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/navs/navs5.html" />

<h3>Fill and justify</h3>
<div class="docs-example">
    <BSNav IsList="true" IsPills="true" IsFill="true">
        <BSNavItem>
            <BSNavLink IsActive="true" href="#">Active</BSNavLink>
        </BSNavItem>
        <BSNavItem>
            <BSNavLink href="#">Link</BSNavLink>
        </BSNavItem>
        <BSNavItem>
            <BSNavLink href="#">Another Link</BSNavLink>
        </BSNavItem>
        <BSNavItem>
            <BSNavLink IsDisabled="true" href="#">Disabled</BSNavLink>
        </BSNavItem>
    </BSNav>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/navs/navs6.html" />
